/**
 *  阻止无效元素的默认行为
 */
(function preventDefaultForInvalidElements() {
    document.querySelectorAll('.invalid').forEach((el) => {
        el.addEventListener('click', (e) => {
            e.preventDefault();
        });
    });
})();

/**
 * 初始化header顶栏的nav导航模块
 */
(function initHeaderNavModule() {
    const headerNavList = document.querySelector('header nav ul');
    const headerNavActiveUnderline = document.querySelector('header nav .active-underline');
    const anchorTargets = document.querySelectorAll('.anchor-target');

    function setNavElements(target) {
        headerNavList.querySelector('a.active').classList.remove('active');
        target.classList.add('active');
        const deltaX = target.offsetLeft - headerNavActiveUnderline.offsetLeft;
        const newWidth = target.clientWidth;
        headerNavActiveUnderline.style.transform = `translateX(${deltaX}px)`;
        headerNavActiveUnderline.style.width = `${newWidth}px`;
    }

    function scrollWindowOnClick(target) {
        const anchor = target.dataset.anchor;
        const anchorElement = document.getElementById(anchor);
        anchorElement.scrollIntoView();
    }

    headerNavList.addEventListener('click', (e) => {
        if (e.target.tagName === 'A' && !e.target.classList.contains('active')) {
            scrollWindowOnClick(e.target);
        }
    });

    (function updateElementsOnScroll() {
        window.addEventListener('scroll', () => {
            //因为header是fixed的不占位置，所以滚动时需要把它的高度考虑进提前量
            const headerHeight = document.querySelector('header').offsetHeight;

            let nowAnchor = null;
            anchorTargets.forEach((anchorTarget) => {
                if (document.documentElement.scrollTop >= anchorTarget.offsetTop - headerHeight - 80)
                    nowAnchor = anchorTarget;
            });
            //又因为滚到底部时滚不动了，页脚这最后一个锚点永远无法触发
            //所以需要再判断一下倒数第二个锚点是否被全部卷去，以及页面是否触底（这两种情况发生的先后顺序不固定，取决于页面和视口的尺寸）
            const anchor2ndLast = anchorTargets[anchorTargets.length - 2];
            const anchorLast = anchorTargets[anchorTargets.length - 1];
            if (document.documentElement.scrollTop + headerHeight
                >= anchor2ndLast.offsetTop + anchor2ndLast.offsetHeight) nowAnchor = anchorLast;
            if (document.documentElement.scrollTop + document.documentElement.clientHeight + 10 //加上10px的冗余，防止不生效
                >= document.documentElement.scrollHeight) nowAnchor = anchorLast;
            const navTarget = headerNavList.querySelector(`a[data-anchor=${nowAnchor.id}]`);
            setNavElements(navTarget);
        });
    })();
})();

/**
 * 初始化设计展柜
 */
(function initExhibitUnorderedList() {
    const exhibitObjects = [
        {
            src: 'https://i.imgs.ovh/2025/09/24/7gDwcO.gif',
            title: '星线网络 STARLINEAR',
            category: 'MG (Motion Graphic)',
            file_type: 'GIF'
        }, {
            src: 'https://i.imgs.ovh/2025/09/24/7gD16d.gif',
            title: '雾境序列 MIST SEQUENCE',
            category: 'Title Effect 1',
            file_type: 'GIF'
        }, {
            src: 'https://i.imgs.ovh/2025/09/24/7gD3lg.gif',
            title: '雾境序列 MIST SEQUENCE',
            category: 'Title Effect 2',
            file_type: 'GIF'
        }, {
            src: 'https://i.imgs.ovh/2025/09/24/7gDiC0.gif',
            title: '雾境序列 MIST SEQUENCE',
            category: 'Chara. Demo',
            file_type: 'GIF'
        }, {
            src: 'https://i.imgs.ovh/2025/09/24/7gMOLn.gif',
            title: '雾境序列 MIST SEQUENCE',
            category: 'Lv. Up Demo',
            file_type: 'GIF'
        }, {
            src: 'https://i.imgs.ovh/2025/09/24/7gM0AY.gif',
            title: '图案动效设计',
            category: 'MG (Motion Graphic)',
            file_type: 'GIF'
        }, {
            src: 'https://i.imgs.ovh/2025/09/24/7gM7Jb.gif',
            title: '动效设计 1',
            category: 'Motion Design',
            file_type: 'GIF'
        }, {
            src: 'https://i.imgs.ovh/2025/09/24/7gMCw1.gif',
            title: '动效设计 2',
            category: 'Motion Design',
            file_type: 'GIF'
        }, {
            src: 'https://i.imgs.ovh/2025/09/24/7gMZPL.gif',
            title: '动效设计 3',
            category: 'Motion Design',
            file_type: 'GIF'
        }, {
            src: 'https://i.imgs.ovh/2025/09/24/7gMccM.gif',
            title: '动效设计 4',
            category: 'Motion Design',
            file_type: 'GIF'
        },
    ];
    const exhibitList = document.getElementById('exhibit-box').querySelector('ul.exhibit-list');
    const exhibitItems = exhibitList.querySelectorAll('li .item');

    let itemIndex = 0;
    exhibitItems.forEach(item => {
        const itemImagePlaceholder = item.querySelector('.item-placeholder');
        const itemImage = item.querySelector('.image img');
        const itemTitle = item.querySelector('.info .title');
        const itemCategory = item.querySelector('.info .desc .category');
        const itemFileType = item.querySelector('.info .desc .file-type');

        itemImagePlaceholder.addEventListener('transitionend', function () {
            this.style.display = 'none';
        });

        itemImage.addEventListener('load', () => {
            itemImagePlaceholder.style.opacity = '0';
        });

        itemImage.src = exhibitObjects[itemIndex].src;
        itemTitle.innerText = exhibitObjects[itemIndex].title;
        itemCategory.innerText = exhibitObjects[itemIndex].category;
        itemFileType.innerText = exhibitObjects[itemIndex].file_type;
        itemIndex++;
    });
})();

